<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-Vue的组件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1.准备一个div容器-->
<div id="app">
    <!--使用模板-->
    <vm-component1></vm-component1>
</div>
<script>
    /*
        创建组件模板
     */
    const vmComponent = Vue.extend({
        template: "<h1 @click='fun1'>模板{{age}}</h1>",
        data() {
            return {
                age: 18,
            }
        },
        methods: {
            fun1: function () {
                this.age++;
            },
        }
    });

    // 注册组件
    Vue.component("vm-component1", vmComponent);


    <!--2.准备一个Vue对象和容器绑定-->
    const vm = new Vue({
        // 绑定容器
        el: "#app",
        // 数据
        data: {},
        // 方法
        methods: {},
        // 局部过滤器
        filters: {},
        // 监听器
        watch: {},
    });
</script>
</body>
</html>